let mouldArr = [
    { id: 1, cont: '温馨提示：参加考试请务必携带准考证和身份证，并认真核对考试......', category: '考试提醒', figure: '张莉', time: '2019-3-21 10:23' },
    { id: 2, cont: '温馨提示：参加考试请务必携带准考证和身份证，并认真核对考试......', category: '开始考试', figure: '谈越', time: '2019-3-21 10:23' },
    { id: 3, cont: '温馨提示：参加考试请务必携带准考证和身份证，并认真核对考试......', category: '考试监控', figure: '洛安', time: '2019-3-21 10:23' },
    { id: 4, cont: '温馨提示：参加考试请务必携带准考证和身份证，并认真核对考试......', category: '考试检测', figure: '侯靖临', time: '2019-3-21 10:23' },
    { id: 5, cont: '温馨提示：参加考试请务必携带准考证和身份证，并认真核对考试......', category: '题库系统', figure: '李小明', time: '2019-3-21 10:23' }

]

let zTbody = document.querySelector('tbody');
let zBtn = document.querySelector('.z-dele-btn');//删除保存的按钮
let zA = document.querySelector('.zz-a');
let zBut = document.querySelector('.z-btn');//查询按钮
let zBut1 = document.querySelector('.z-btn1');//重置

let tExt = document.querySelector('textarea');//文本
let aSpan = document.querySelector('.scor');

let zSave = document.querySelector('.zz-save-btn')//修改保存的按钮;
let zEditcont = document.querySelector('.zz-edit-con');
let zEditcategory = document.querySelector('.zz-edit-category');
let zEditfigure = document.querySelector('.zz-edit-figure');
let zEdittime = document.querySelector('.z-edit-time');

//查询事件
let zSearch=document.querySelector('.zz-search');
let zSearchcon=document.querySelector('.zz-searchcon')

//新增保存
let  zAddsave=document.querySelector('.zz-add-save');
let zAddsel=document.querySelector('.zz-add-sel');
let zAddcon=document.querySelector('.zz-add-con');
let zAddname=document.querySelector('.zz-add-name');
let zAddtime=document.querySelector('.zz-add-time');

let deleId = 0;
let editId = 0;//修改的id
let zMaxl = 65;
let id=6;
let n = 0;//复选框

//页面开始加载，渲染
function render(arr) {
    let str = '';
    for (let i = 0; i <arr.length; i++) {
        str += `<tr>
        <td>${i+1}</td>
    <td >${arr[i].cont}</td>
    <td >${arr[i].category}</td>
    <td >${arr[i].figure}</td>
    <td >${arr[i].time}</td>
    <td data-id="${arr[i].id}">
    <a class="dele" data-toggle="modal" data-target="#delModal"> 删除&nbsp;</a>
    <a class="edit" data-toggle="modal"
        data-target="#editModal">&nbsp;修改</a>
        </td>
  </tr>`
    }
    zTbody.innerHTML = str
}
render(mouldArr);
//删除事件

zTbody.addEventListener('click', function (e) {
    if (e.target.className.includes('dele')) {
        deleId = e.target.parentNode.dataset.id
    } else if (e.target.className.includes('edit')) {
        zEditcont.value = e.target.parentNode.parentNode.children[1].innerText;
        editId = e.target.parentNode.dataset.id;
        zEditfigure.value = e.target.parentNode.parentNode.children[3].innerText;
        zEdittime.value = e.target.parentNode.parentNode.children[4].innerText;
        let str = e.target.parentNode.parentNode.children[2].innerText;
        document.querySelector('.zz-edit-category option[value="' + str + '"]').selected = true//在js中注意要取value的值，需要将HTML的值写好；
        editId = e.target.parentNode.dataset.id;

    }
    
});
//点击按钮的时候删除
zBtn.addEventListener('click', function () {
    for (let i = 0; i < mouldArr.length; i++) {
        if (mouldArr[i].id == deleId) {
            mouldArr.splice(i, 1)
            render(mouldArr);
            return;
        }
    }
})

//重置
zBut1.addEventListener('click', function () {
    location.reload();
})
//计分板
tExt.addEventListener('input', function () {
    let i = tExt.value.length
    aSpan.innerText = '模板内容不能多于65个字，当前已输入' + i + '个字';
})
//修改事件
zSave.addEventListener('click', function () {
    let json = {
        id: editId,
        cont: zEditcont.value,
        category: zEditcategory.value,
        figure: zEditfigure.value,
        time: zEdittime.value
    }
    for (let i = 0; i < mouldArr.length; i++) {
        if (mouldArr[i].id == editId) {
            mouldArr.splice(i, 1, json)
        }
    }
    render(mouldArr);
});
//查询事件
zSearch.addEventListener('click',function(){
    let  listArr=[];
     let str=zSearchcon.value;
    for(let i=0;i<mouldArr.length;i++){
        console.log(mouldArr[i].category,str);
        if(mouldArr[i].category.includes(str)){
            listArr.push(mouldArr[i]);
            zSearchcon.value='';
        }
    }
    render(listArr)
})
//新增模板
zAddsave.addEventListener('click',function(){
    mouldArr.push({
        id:++id,
        cont:zAddcon.value,
        category:zAddsel.value,
        figure:zAddname.value,
        time:zAddtime.value
    })
    render(mouldArr);
    zAddcon.value=''
    zAddsel.value=''
    zAddname.value=''
    zAddtime.value=''
})